<template>
	<view class="item-container">
		<!-- 入库信息卡片 -->
		<view class="info-card">
			<view class="info-item">
				<text class="label">调货单号：</text>
				<text class="value">{{orderIn.id}}</text>
			</view>
			<view class="info-item">
				<text class="label">创建时间：</text>
				<text class="value">{{orderIn.transferTime}}</text>
			</view>
			<view class="info-item">
				<text class="label">调货原因：</text>
				<text class="value">{{orderIn.transferReason}}</text>
			</view>
			<view class="info-item">
				<text class="label">调入仓库：</text>
				<text class="value">{{orderIn.transferRoomName}}</text>
			</view>
			<view class="info-item">
				<text class="label">状态：</text>
				<text class="value">{{getStatusText(orderIn.isSure)}}</text>
			</view>
		</view>
		
		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="list-header">
				<text class="header-item">商品名称</text>
				<text class="header-item">规格</text>
				<text class="header-item">数量</text>
			</view>
			<view class="list-content">
				<view class="list-item" v-for="(item, index) in orderIn.transferInfoRequestList" :key="index">
					<text class="item-text">{{item.productName}}</text>
					<text class="item-text">{{item.productAttrValue}}</text>
					<text class="item-text">{{item.transferNumber}}</text>
				</view>
			</view>
		</view>
		
		<!-- 底部按钮 -->
		<view class="bottom-buttons">
			<!-- <button class="btn cancel" @tap="handleCancel">取消</button> -->
			<button class="btn confirm" @tap="handleConfirm" v-if="orderIn.isSure === 0">确认入库</button>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			orderIn: {
				type: Object,
				default: () => ({})
			}
		},
		methods: {
			getStatusText(status) {
				const statusMap = {
					0: '待处理',
					1: '已确认',
					// 2: '已完成',
					// 3: '已取消'
				}
				return statusMap[status] || '未知状态'
			},
			handleCancel() {
				this.$emit('cancel')
			},
			handleConfirm() {
				this.$emit('confirm',this.orderIn.id)
			}
		}
	}
</script>

<style>
	.item-container {
		background-color: #ffffff;
		margin: 30rpx 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
	}
	
	.item-container:active {
		transform: scale(0.98);
	}
	
	.info-card {
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		background: linear-gradient(to right, #f8f9fa, #ffffff);
	}
	
	.info-item {
		display: flex;
		margin-bottom: 20rpx;
		align-items: center;
	}
	
	.info-item:last-child {
		margin-bottom: 0;
	}
	
	.label {
		width: 160rpx;
		color: #666666;
		font-size: 28rpx;
		font-weight: 500;
	}
	
	.value {
		flex: 1;
		color: #333333;
		font-size: 28rpx;
		font-weight: 400;
	}
	
	.goods-list {
		padding: 30rpx;
		background-color: #ffffff;
	}
	
	.list-header {
		display: flex;
		background-color: #f8f9fa;
		padding: 20rpx;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
	}
	
	.header-item {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
		color: #333333;
		font-weight: 600;
	}
	
	.list-content {
		max-height: 400rpx;
		overflow-y: auto;
		border-radius: 12rpx;
		background-color: #ffffff;
	}
	
	.list-item {
		display: flex;
		padding: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
		transition: background-color 0.2s ease;
	}
	
	.list-item:hover {
		background-color: #f8f9fa;
	}
	
	.list-item:last-child {
		border-bottom: none;
	}
	
	.item-text {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
		color: #333333;
		position: relative;
		padding: 0 10rpx;
	}
	
	.item-text:not(:last-child)::after {
		content: '';
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 1rpx;
		height: 70%;
		background-color: #e8e8e8;
	}
	
	.bottom-buttons {
		display: flex;
		padding: 30rpx;
		border-top: 1rpx solid #f0f0f0;
		background-color: #ffffff;
	}
	
	.btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 40rpx;
		font-size: 30rpx;
		margin: 0 20rpx;
		font-weight: 500;
		transition: all 0.3s ease;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}
	
	.btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}
	
	.cancel {
		background-color: #f5f5f5;
		color: #666666;
	}
	
	.confirm {
		background: linear-gradient(135deg, #007AFF, #0056b3);
		color: #ffffff;
	}
	
	/* Status text styling */
	.value:last-child {
		color: #007AFF;
		font-weight: 500;
	}
	
	/* Custom scrollbar for the list */
	.list-content::-webkit-scrollbar {
		width: 6rpx;
	}
	
	.list-content::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 3rpx;
	}
	
	.list-content::-webkit-scrollbar-thumb {
		background: #c1c1c1;
		border-radius: 3rpx;
	}
	
	.list-content::-webkit-scrollbar-thumb:hover {
		background: #a8a8a8;
	}
</style> 